<template>
	<view :class="config.style">
		<view class="sale-bar">
			<view class="item back" @click="back()">
				<view class="icon">
					<uni-icons type="arrowthinleft" size="14" color="#999"></uni-icons> 
				</view>
				<text class="text">返回</text>
			</view>
			<view class="item favorites" @click="favorites()">
				<view class="icon">
					<uni-icons type="star-filled" size="14" :color="favorites_yesno==1?'#f90':'#999'"></uni-icons> 
				</view>
				<text class="text">收藏</text>
			</view>
			<view class="item share" @click="share()">
				<view class="icon">
					<uni-icons type="redo-filled" size="14" color="#999"></uni-icons> 
				</view>
				<text class="text">分享</text>
			</view>
			<view class="sale-btn">
				<!--下单支付-->
				<button v-if="data.activity_status <= 2 && data.purchase == 0" type="default" size="mini" class="sale-button" hover-class="button-hover" @click="openSaleChoose()">
					<text>立即报名</text>
				</button>
				
				<button v-if="data.activity_status <= 2 && data.purchase == 1" type="default" size="mini" class="sale-button disabled" disabled="true">
					<text>已报名</text>
				</button>
				
				<button v-if="data.activity_status == 3" type="default" size="mini" class="sale-button disabled" disabled="true">
					<text>已结束</text>
				</button>
			</view>
		</view>
		
		<!-- 下单弹出框 -->
		<uni-popup id="saleChoose" ref="saleChoose" type="bottom">
			<view class="saleChoose">
				
				<view class="goods-info">
					<view class="cover">
						<image class="image" :src="data.cover_100" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="price">
							<text class="yuan">￥</text>
							<!-- <text class="value">{{data.price}}</text> -->
							<view class="rate">
								<template v-if="data.price == 0">
									<text class="pointback">免费</text>
								</template>
								<template v-else>
									<text class="pointback">{{handlePrice(data.price,0)}}</text>
									<text>.</text>
									<text>{{handlePrice(data.price,1)}}</text>
								</template>
							</view>
						</view>
						<view class="title text-ellipsis-2">
							{{data.title}}
						</view>
						<view class="description text-ellipsis">
							{{data.description}}
						</view>
					</view>
				</view>
				
				<view class="goods-quantity">
					<view class="title">名额</view>
					<view class="info">
						<text class="quantity">剩余：</text>
						<text>{{data.remainder_quantity}}</text>
					</view>
				</view>
				
				<view class="diglog-sale">
					<!--下单支付-->
					<button type="default" class="sale-button" hover-class="button-hover" @click="sale()">
						<text>确认报名</text>
					</button>
				</view>
			</view>
		</uni-popup>

		<!--登录框-->
		<Login ref="login" :config="config" @getUserInfo="getUserInfo"/>
		<!--分享海报-->
		<qrcode-poster ref="poster" 
			:title="data.title" 
			:subTitle="data.description" 
			:headerImg="data.cover_400" 
			:abImg="config.cover_200" 
			:price="data.price" />
	</view>
</template>

<script>
	import QrcodePoster from '../../../components/muu-qrcode-poster/muu-qrcode-poster.vue'

	export default {
		name: 'SaleBar',
		components: {
			QrcodePoster
		},
		props: {
			config: {
				type: Object,
				default: {}
			},
			type: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				userInfo: {},
				favorites_yesno: 0, //是否已收藏
				qrcode: '', // 小程序二维码
				/********以下商品相关数据********/
				sku: this.data.sku_format || {}, // 商品的SKU数据
				skuTable: [],
				skuInfo: [],
				chooseSkuIndex: '', //用户选择的SKU索引
				quantity: this.data.quantity, //商品库存数量
				num: 1, // 购买数量
			}
		},
		created() {
			this.favorites_yesno = this.data.favorites_yesno
			//获取已登录用户数据
			this.getUserInfo()
		},
		
		methods: {

			/**
			 * 返回
			 */
			back(){
				let pages = getCurrentPages() // 获取栈实例
				let prevPage = pages[pages.length - 2]
				if(prevPage !== undefined){
					uni.navigateBack()
				}else{
					let url = '../index/index'
					uni.redirectTo({
						url: url
					});
				}
			},
			
			/**
			 * 收藏
			 */
			favorites(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {};
				
				let params = this.urlParams
				let data = {}
					data.action = 'edit'
					data.info_id = this.data.id
					data.info_type = 'activity'
					
				//获取首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/favorites'
					//#endif
					//#ifdef H5
					url = 'entry/site/favorites'
					//#endif
				this.util.request({
					url : url,
					data : data,
					method: 'POST',
					
					success: function (res) {
						if (res.data.code == 200) {
							//console.log(res)
							uni.showToast({
								title: res.data.msg,
								duration: 2000
							});
							that.setFavorites()
						}
						if(res.data.msg == '需要登录'){
							//触发登录框
							that.$refs.login.loginDialog()
						}
					}
				})
				
			},
			setFavorites(){
				if(this.favorites_yesno == 0){
					this.favorites_yesno = 1
				}else{
					this.favorites_yesno = 0
				}
			},
			/**
			 * 分享海报
			 */
			share(){
				let that = this
				//#ifdef MP-WEIXIN
				//获取二维码base64码
				that.is_show_model = false
				let qrcode_url = this.util.url('entry/wxapp/qrcode',{
					'type': that.type,
					'type_id': Number(that.data.id),
					'm': 'muu_activity'
				})
				that.$refs.poster.showCanvas(qrcode_url)
				//#endif
				
				//#ifdef H5
				let url = '../share/index?type=activity&type_id=' + this.data.id
				//console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
				//#endif
			},
			
			/**
			 * 打开下单选择确认弹出框
			 */
			openSaleChoose(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {};
				console.log(userInfo,'userInfo')

				if (userInfo.memberInfo) {
					this.$refs.saleChoose.open()
				}else{
					//触发登录框
					that.$refs.login.loginDialog()
				}
			},
	
			/**
			 * 下单支付
			 */
			sale(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {};
				if (userInfo) {
					let data = {
						'products_id' : this.data.id,
						'action': 'create',
					}

					//下单
					let url = ''
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/orders'
						//#endif
						//#ifdef H5
						url = 'entry/site/orders'
						//#endif
					this.util.request({
						url : url,
						data: data,
						method: 'POST',
						
						success: function (res) {
							//console.log(res.data);
							if (res.data.code == 200) {
								if(res.data.data.paid == 0){
									that.pay('muu_activity',res.data.data.order_no)
								}else{
									//执行成功提示
									uni.showModal({
									    title: '提示',
									    content: '报名成功',
										confirmText: '查看订单',
										cancleText: '返回商品页',
									    success: function (res) {
									        if (res.confirm) {
									            console.log('用户点击确定');
												let order_url = '../my/orders/index'
												uni.redirectTo({
													url: order_url
												});
									        } else if (res.cancel) {
									            console.log('用户点击取消');
												// 更新父组件数据
												that.$emit('getData')
												that.$refs.saleChoose.close()
									        }
									    }
									});
								}
							}else{
								uni.showToast({
								    title: res.data.msg,
									icon: 'none',
								    duration: 2000
								});
							}
						}
					})
				}else{
					//触发登录框
					that.$refs.login.loginDialog()
				}
			},
			
			/**
			 * 订单支付
			 */
			pay: function(module,order_no){
				let that = this
				// 支付
				let url = ''
					// #ifdef MP-WEIXIN
					url = 'entry/wxapp/pay'
					// #endif
					// #ifdef H5
					url = 'entry/site/pay'
					// #endif
				this.util.request({
					url : url,
					data : {
					  'module': module, //发起支付的订单所属模块
					  'order_no': order_no, //唯一订单号
					},
					
					success(res) {
						if (res.data && res.data.data && res.data.code == 200) {
							console.log(res);
							// #ifdef H5 
							//JSSDK
							that.wechat.pay({
								'timeStamp': res.data.data.timeStamp,
								'nonceStr': res.data.data.nonceStr,
								'package': res.data.data.package,
								'signType': res.data.data.signType,
								'paySign': res.data.data.paySign,
								'success': function (res) {
									//执行支付成功提示
									uni.showModal({
									    title: '提示',
									    content: '支付成功',
										confirmText: '查看订单',
										cancleText: '返回商品页',
									    success: function (res) {
									        if (res.confirm) {
									            console.log('用户点击确定');
												let order_url = '../my/orders/index'
												uni.redirectTo({
													url: order_url
												});
									        } else if (res.cancel) {
									            console.log('用户点击取消');
												that.$emit('getData')
												that.$refs.saleChoose.close()
									        }
									    }
									});
								},
								'fail': function (res) {
									uni.navigateBack()
								}
							},window.location.href);
							// #endif
							
							// #ifdef MP-WEIXIN
							//发起支付
							uni.requestOrderPayment({
								'provider': 'wxpay',
								'timeStamp': res.data.data.timeStamp,
								'nonceStr': res.data.data.nonceStr,
								'package': res.data.data.package,
								'signType': res.data.data.signType,
								'paySign': res.data.data.paySign,
								'success': function (res) {
									//执行支付成功提示
									uni.showModal({
									    title: '提示',
									    content: '支付成功',
										confirmText: '查看订单',
										cancleText: '返回商品页',
									    success: function (res) {
									        if (res.confirm) {
									            console.log('用户点击确定');
												let order_url = '../my/orders/index'
												uni.redirectTo({
													url: order_url
												});
									        } else if (res.cancel) {
									            console.log('用户点击取消');
												// 更新父组件数据
												that.$emit('getData')
												that.$refs.saleChoose.close()
									        }
									    }
									});
								},
								'fail': function (res) {
									uni.navigateBack()
								}
							})
							// #endif
							
						 }else{
							uni.showModal({
								title: '系统提示',
								content: res.data.msg ? res.data.msg : '未知错误',
								showCancel: false,
								success: function (res) {
									if (res.confirm) {
										uni.navigateBack()
									}
								}
							})
						}
					},
					fail(res) {
						uni.showModal({
							title: '系统提示',
							content: res.data.msg ? res.data.msg : '错误',
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									
								}
							}
						})
					}
				});
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				this.userInfo = userInfo
				if (userInfo) {
					// 执行父级(更新数据)
					this.$emit('getData')
				}
			},
			
			/**
			 * 格式化价格
			 * @param {Object} price
			 * @param {Object} index
			 */
			handlePrice(price,index){
				return (price || "").split('.')[index];
			}
		},
		
		
	}
</script>

<style lang="scss">
	.sale-bar {
		display: flex;
		position: fixed;
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: #ffffff;
		text-align: center;
		border-top: 2rpx solid #f4f6f7;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		z-index: 99;
		.item {
			padding: 0;
			flex: 1;
			.icon {
				display: block;
				height: 56rpx;
				overflow: hidden;
				line-height: 56rpx;
			}
			.text {
				display: block;
				font-size: 24rpx;
				color: #999;
				height: 40rpx;
				line-height: 40rpx;
				overflow: hidden;
			}
		}
		.sale-btn {
			width: 360rpx;
			padding: 0;
			padding: 14rpx 10rpx 14rpx 0;
			
			.sale-button {
				display: block;
				font-size: 30rpx;
				padding: 0;
				line-height: 69rpx;
				border-radius: 30rpx;
				color: #fff;
				&::after {
					border: 0;
				}
			}
			.button-hover {
				
			}
			.disabled {
				opacity: .6;
			}
		}
	}
	
	/*下单选择确认框*/
	.saleChoose {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		.goods-info {
			display: flex;
			flex-wrap: wrap;
			.cover {
				position: relative;
				width: 193rpx;
				height: 193rpx;
				overflow: hidden;
				border-radius: 14rpx;
				z-index: 2;
				margin: 19rpx 45rpx 38rpx 14rpx;
				.image {
					border-radius: 10rpx;
					width: 193rpx;
					height: 193rpx;
					display: block;
				}
			}
			.info {
				flex: 1;
				padding: 10rpx;
				.title {
					font-size: 24rpx;
					color: #2d2e2f;
					font-weight: 600;
					height: 72rpx;
					line-height: 36rpx;
				}
				.description {
					color: #999;
					font-size: 24rpx;
				}
				.price {
					margin-top: 10rpx;
					font-size: 36rpx;
					.yuan {
						font-size: 28rpx;
					}
					.rate{
						display: inline-block;
						.pointback{
							font-size: 60rpx;
							font-family: 'DIN-Medium, DIN';
							font-weight: 600;
						}
					}
					.value {
	
					}
				}
			}
		}
		
		.goods-count {
			margin: 10rpx 0;
			display: flex;
			height: 28rpx;
			
			.title {
				flex: 1;
				font-size: 24rpx;
				color: #2d2e2f;
				line-height: 26rpx;
				font-family: 'PingFangSC-Medium, PingFang SC';
				font-weight: 600;
			}
			.info {
				width: 100px;
				
				.number-box {
					display: flex;
					width: 200rpx;
					.cut-btn {
						width: 58rpx;
						height: 58rpx;
						line-height: 58rpx;
						text-align: center;
						background-color: #f5f5f7;
						border-radius: 4rpx;
						border: 2rpx solid #ddd;
					}
					.add-btn {
						width: 58rpx;
						height: 58rpx;
						line-height: 58rpx;
						text-align: center;
						background-color: #f5f5f7;
						border-radius: 4rpx;
						border: 2rpx solid #ddd;
					}
					.number-input {
						flex: 1;
						height: 58rpx;
						line-height: 58rpx;
						border: 2rpx solid #ddd;
						border-radius: 4rpx;
						text-align: center;
						font-size: 26rpx;
						margin: 0 4rpx;
						background-color: #f5f5f7;
					}
				}
			}
		}
		
		.goods-quantity {
			margin: 40rpx 0 20rpx;
			display: flex;
			height: 46rpx;
			line-height: 46rpx;
			font-family: 'PingFangSC-Medium, PingFang SC';
			.title {
				font-size:24rpx;
				width: 50%;
				color: #2d2e2f;
				font-weight: 600;
			}
			.info {
				width: 50%;
				text-align: right;
				
				font-size: 24rpx;
				color: #2d2e2f;
				font-weight: 600;
			}
		}
		
		.diglog-sale {
			width: 100%;
			.sale-button {
				display: block;
				border-radius: 46rpx;
				color: #fff;
			}
			.button-hover {
				
			}
		}
	}
	
	/*页面风格设计*/
	.Blue {
		.sale-bar {
			.sale-btn {
				.sale-button {
					background-color: $Blue;
				}
				.button-hover {
					background-color: $Blue-hover;
				}
			}
		}
		.saleChoose {
			.price {
				color: $Blue;
			}
			.goods-sku {
				.chile-item.active {
					color: $Blue;
					border: 2rpx solid $Blue;
				}
			}
			.sale-button {
				background-color: $Blue;
			}
			.button-hover {
				background-color: $Blue-hover;
			}
		}
	}
	.Green {
		.sale-bar {
			.sale-btn {
				.sale-button {
					background-color: $Green;
				}
				.button-hover {
					background-color: $Green-hover;
				}
			}
		}
		.saleChoose {
			.price {
				color: $Green;
			}
			.goods-sku {
				.chile-item.active {
					color: $Green;
					border: 2rpx solid $Green;
				}
			}
			.sale-button {
				background-color: $Green;
			}
			.button-hover {
				background-color: $Green-hover;
			}
		}
	}
	.LightRed {
		.sale-bar {
			.sale-btn {
				.sale-button {
					background-color: $LightRed;
				}
				.button-hover {
					background-color: $LightRed-hover;
				}
			}
		}
		
		.saleChoose {
			.price {
				color: $LightRed;
			}
			.goods-sku {
				.chile-item.active {
					color:  $LightRed;
					border: 2rpx solid $LightRed;
				}
			}
			.sale-button {
				background-color: $LightRed;
			}
			.button-hover {
				background-color: $LightRed-hover;
			}
		}
	}
	.Orange {
		.sale-bar {
			.sale-btn {
				.sale-button {
					background-color: $Orange;
				}
				.button-hover {
					background-color: $Orange-hover;
				}
			}
		}
		.saleChoose {
			.price {
				color: $Orange;
			}
			.goods-sku {
				.chile-item.active {
					color: $Orange;
					border: 2rpx solid $Orange;
				}
			}
			.sale-button {
				background-color: $Orange;
			}
			.button-hover {
				background-color: $Orange-hover;
			}
		}
	}
	.LightPink {
		.sale-bar {
			.sale-btn {
				.sale-button {
					background-color: $LightPink;
				}
				.button-hover {
					background-color: $LightPink-hover;
				}
			}
		}
		.saleChoose {
			.price {
				color: $LightPink;
			}
			.goods-sku {
				.chile-item.active {
					color: $LightPink;
					border: 2rpx solid $LightPink;
				}
			}
			.sale-button {
				background-color: $LightPink;
			}
			.button-hover {
				background-color: $LightPink-hover;
			}
		}
	}
	.Magenta {
		.sale-bar {
			.sale-btn {
				.sale-button {
					background-color: $Magenta;
				}
				.button-hover {
					background-color: $Magenta-hover;
				}
			}
		}
		.saleChoose {
			.price {
				color: $Magenta;
			}
			.goods-sku {
				.chile-item.active {
					color: $Magenta;
					border: 2rpx solid $Magenta;
				}
			}
			.sale-button {
				background-color: $Magenta;
			}
			.button-hover {
				background-color: $Magenta-hover;
			}
		}
	}
	
	
	

</style>
